<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>对话</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {

            $('#newmessage').submit(function(e) {
                var message = $("#messageinput").val();
                $.ajax({
                    'type'     : 'POST',
                    'url'      : '/put/{{room}}/{{uid}}',
                    'data'     : { 'message': message },
                    'dataType' : 'json',
                });
                $("#messageinput").val('');
                $("#messageinput").focus();
                e.preventDefault();
            });

            var longPoll = function() {
              return $.ajax({
                type: "POST",
                url: "/poll/" + "{{uid}}",
                async: true,
                cache: false,
                timeout: 100000,
                success: function(data) {
                  if (data.length > 0) {
                      $("#messages").append($("<li>" + data + "</li>"))
                  }
                  return longPoll();
                },
                dataType: 'json'
              });
            };

            longPoll();

        });
    </script>
</head>
<body>
    消息列表:
    <ul id="messages">
        {% for message in messages %}
        <li>{{message}}</li>
        {% endfor %}
    </ul>
    <form id="newmessage">
        <input id="messageinput"></input>
        <input type="submit"/>
    </form>
</button>
</body>
</html>
